<!--  -->
<template>
    <div class="">
        <el-dialog
            :visible.sync="visibleDialog"
            @close="$emit('update:rentDialogVisible', false)"
            :show="rentDialogVisible"
            :title="dialogTitle"
        >
            <el-form :model="formData" label-width="90px" label-position="right">
                <el-card class="card-type">
                    <div slot="header" class="clearfix">
                        <span class="span">资产信息</span>
                    </div>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                v-for="item in formData.assetData"
                                :key="item.guid"
                                label="承租房屋"
                            >
                                <el-input v-model="item.address"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                v-for="item in formData.assetData"
                                :key="item.guid"
                                required
                                label="计租面积"
                            >
                                <el-input v-model="item.build_area"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                v-for="item in formData.assetData"
                                :key="item.guid"
                                label="租金"
                                required
                            >
                                <el-input v-model="item.hire"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="card-type">
                    <div slot="header" class="clearfix">
                        <span class="span">承租人信息</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="性别">
                                <el-radio-group v-model="formData.sex">
                                    <el-radio label="0">男</el-radio>
                                    <el-radio label="1">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item required label="承租人">
                                <el-input v-model="formData.Charter" placeholder="承租人"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="承租人性质">
                                <el-input v-model="formData.userProperty" placeholder="承租人性质"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否低保">
                                <el-radio-group v-model="formData.isLow">
                                    <el-radio label="0">是</el-radio>
                                    <el-radio label="1">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item required label="联系电话">
                                <el-input v-model="formData.Phone" placeholder="联系电话"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="单位联系人">
                                <el-input v-model="formData.contact" placeholder="审批人"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="信誉等级">
                                <el-select v-model="formData.level" placeholder="1">
                                    <el-option label="0" value="0"></el-option>
                                    <el-option label="1" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item required label="证件类型">
                                <el-select v-model="formData.CardType" placeholder="1">
                                    <el-option label="身份证" value="0"></el-option>
                                    <el-option label="营业执照" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item required label="证件号码">
                                <el-input v-model="formData.IDNo" placeholder="证件号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="经营项目">
                                <el-select v-model="formData.project" placeholder="1">
                                    <el-option label="商店" value="0"></el-option>
                                    <el-option label="娱乐场所" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item label="店名">
                                <el-input v-model="formData.tradeName" placeholder="店名"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="card-type">
                    <div slot="header" class="clearfix">
                        <span class="span">租赁信息</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="租赁性质">
                                <el-select v-model="formData.rentProperty" placeholder="1">
                                    <el-option label="1" value="0"></el-option>
                                    <el-option label="2" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="收租类型">
                                <el-select v-model="formData.rentType" placeholder="1">
                                    <el-option label="1" value="0"></el-option>
                                    <el-option label="2" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="计租面积">
                                <el-input :disabled="true" v-model="rentArea" placeholder="面积"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="月租金">
                                <el-input v-model="monthRent" :disabled="true" placeholder="月租金"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否递增">
                                <el-select v-model="formData.augment" @change="augmentChange">
                                    <el-option label="不递增" value="0"></el-option>
                                    <el-option label="递增" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="递增类型">
                                <el-select
                                    v-model="formData.augmentGenre"
                                    :disabled="rentDisabled"
                                    placeholder="递增类型"
                                >
                                    <el-option label="每年递增" value="0"></el-option>
                                    <el-option label="一次性递增" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item required label="租金递增">
                                <el-input
                                    v-model="formData.increment"
                                    :disabled="rentDisabled"
                                    placeholder="递增百分比"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item required label="开始递增">
                                <el-date-picker
                                    v-model="formData.augmentDate"
                                    :disabled="rentDisabled"
                                    value-format="timestamp"
                                    style="width:100%"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="签订日期">
                                <el-date-picker
                                    clearable
                                    v-model="formData.signDate"
                                    type="date"
                                    value-format="timestamp"
                                    range-separator="至"
                                    style="width:100%"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item required label="合同编号">
                                <el-input v-model="formData.contractNo" placeholder="合同编号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item required label="出租月数">
                                <el-date-picker
                                    clearable
                                    v-model="formData.chartDate"
                                    type="daterange"
                                    value-format="timestamp"
                                    start-placeholder="出租开始日期"
                                    end-placeholder="出租结束日期"
                                    range-separator="至"
                                    style="width:100%"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="合同总额">
                                <el-input v-model="formData.totalMoney" placeholder="合同总额"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="保证金">
                                <el-input v-model="formData.margin" placeholder="保证金"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="经办人">
                                <el-input v-model="formData.agent" placeholder="经办人"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="备注">
                        <el-input v-model="formData.note" label="备注"></el-input>
                    </el-form-item>
                </el-card>
                <el-card class="card-type">
                    <div slot="header" class="clearfix">
                        <span class="span">附件上传</span>
                    </div>
                    <upload-file
                        :selectionGuid="selectionGuid"
                        :rootGuid="rootGuid"
                        @uploadBody="uploadBody"
                    ></upload-file>
                </el-card>
                <el-row style="text-align:right">
                    <el-button type="primary" @click="handleReplace">合同预览</el-button>
                    <el-button v-if="dialogTitle==='出租'" type="primary" @click="handleRent">确定出租</el-button>
                    <el-button v-else type="primary" @click="handleRelet">续租</el-button>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import uploadFile from "@/views/upload/uploadFile";
import { rentOut, getChartInfoRoom } from "@/api/rent";
import { rentlook } from "@/api/table";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { uploadFile },
  data() {
    //这里存放数据
    return {
      visibleDialog: this.rentDialogVisible,
      rentDisabled: true,
      formData: {
        augment: "0",
        assetData: [{ hire: "", address: "", build_area: "", guid: "" }],
        uploadInfo: {}
      },
      rootGuid: "f27b3cfb2f7c421bbb5157c222756eed",
      selectionGuids: [],
      chartInfoParams: { offset: 1, limit: 10 }
    };
  },
  props: {
    rentDialogVisible: {
      type: Boolean,
      default: false
    },
    assetData: {
      type: Array,
      defualt: []
    },
    selectionGuid: {
      type: Array,
      default: []
    },
    dialogTitle: {
      type: String,
      default: "出租"
    }
  },
  //监听属性 类似于data概念
  computed: {
    rentArea() {
      let rentArea = 0;
      for (let index = 0; index < this.formData.assetData.length; index++) {
        rentArea += Number(this.formData.assetData[index].build_area);
      }
      this.formData.rentArea = rentArea;
      return rentArea;
    },
    monthRent() {
      let monthRent = 0;
      for (let index = 0; index < this.formData.assetData.length; index++) {
        monthRent += Number(this.formData.assetData[index].hire);
      }
      this.formData.monthRent = monthRent;
      return monthRent;
    }
  },
  //监控data中的数据变化
  watch: {
    rentDialogVisible() {
      this.visibleDialog = this.rentDialogVisible;
    },
    assetData(val) {
      console.log("assetData", val);
      this.getSelection();
    }
  },
  //方法集合
  methods: {
    //获取资产信息
    getSelection() {
      this.$nextTick(_ => {
        this.formData.assetData = this.assetData;
      });
    },
    //出租
    handleRent() {
      console.log(this.formData);
      rentOut(this.formData).then(response => {
        if (response.code === 100) {
          this.$message({ message: "出租成功", type: "success" });
        }
      });
    },
    //续租
    handleRelet() {
      this.formData.OldChartGUID = this.formData.ChartGUID;
      this.formData.Relet = 1;
      console.log(this.formData);
      rentOut(this.formData).then(response => {
        console.log(response);
      });
    },
    //打印
    handleReplace() {
      console.log("formdata", this.formData);
      let address = "";
      this.formData.assetData.forEach(item => {
        address = address + "," + item.address;
      });
      address = address.substring(1);
      this.formData.address = address;
      rentlook(this.formData)
        .then(response => {
          //调用返回的pdf地址
          let url = response.body.pdfAdress; // 有效 服务器配置跨域处理
          //window.location.href = "/static/pdf/web/viewer.html?file=" + url;
          window.open("/static/pdf/web/viewer.html?file=" + url);
        })
        .catch(error => {
          console.log(error);
        });
      // window.open("/static/pdf/web/viewer.html?file=" + this.pdfUrl);
    },
    //监听 是否递增
    augmentChange(val) {
      if (val === "0") {
        this.rentDisabled = true;
      } else {
        this.rentDisabled = false;
      }
    },
    //获取上传文件图片时的信息
    uploadBody(body) {
      console.log("uploadbyd", body);
      this.formData.uploadInfo = body;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.formData.assetData = this.assetData;
    // console.log("xzxx" + this.assetData);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.card-type {
  // padding: 20px;
  padding-right: 15px;
  margin-bottom: 20px;
}
</style>